<template>
  <div>
    御剑乘风来,除魔天地间!
    <hr />
    <comm></comm>
    <hr />
    <el-button>按钮</el-button>
    <el-button type="success">成功按钮</el-button>
    <el-switch v-model="value" active-color="#13ce66" inactive-color="#ff4949">
    </el-switch>

    <el-input v-model="input" placeholder="请输入内容"></el-input>

    <!-- table组件 -->
    <e-tab></e-tab>

    <!-- mixin -->

    <!-- {{ m }} -->

    <!-- 回顾插槽 -->
    <comm>
      <!-- 具名插槽 -->
      <!-- <template v-slot:first>
        <h1>我是111</h1>
      </template> -->
      <!-- <template #first>
        <h1>我是111</h1>
      </template> -->
      <!-- <h1 slot="first">我是111</h1> -->
    </comm>

    <hr />
    <hr />
    <comm :first="list">
      <!-- 具名插槽 -->
      <!-- <template v-slot:first>
        <h1>我是111</h1>
      </template> -->
      <!-- <template #first>
        <h1>我是111</h1>
      </template> -->
      <!-- <h1 slot="first">我是111</h1> -->
      <template slot-scope="scope">
        <div>
          <pre>{{ scope }}</pre>
          <el-button type="success" @click="btn(scope.row.id)">按钮</el-button>
        </div>
      </template>
    </comm>
  </div>
</template>
           
<script>
import eTab from './views/eTab.vue'
export default {
  name: '',
  components: {
    eTab
  },
  data () {
    return {
      value: true,
      input: '',
      list: [
        { id: 1, name: 'jack' },
        { id: 2, name: 'rose' },
        { id: 3, name: 'tom' }
      ]
    }
  },
  created () {},
  computed: {},
  methods: {
    btn (id) {
      console.log(id, 999)
    }
  }
}
</script>
<style lang='less'  scoped>
</style>